<html>
	<body>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<link href="emoticons.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/emoticons.js"></script>



<script>
function createEmotionsDrp(emotionsList){
	var emDrpList="<select >";
	for(var emotion in emotionsList ){
		emDrpList+='<option value="'+emotionsList[emotion].codes[0]+'">'+$.emoticons.replace(emotionsList[emotion].codes[0])+" "+emotionsList[emotion].title+'</option>';	
	}
	emDrpList+="</select>";
	if(document.getElementById("emotionslist")){
		document.getElementById("emotionslist").innerHTML=emDrpList;
	}
}

$(document).ready(function() {
    var definition = {"smile":{"title":"Smile","codes":[":)",":=)",":-)"]},"sad-smile":{"title":"Sad Smile","codes":[":(",":=(",":-("]},"big-smile":{"title":"Big Smile","codes":[":D",":=D",":-D",":d",":=d",":-d"]},"cool":{"title":"Cool","codes":["8)","8=)","8-)","B)","B=)","B-)","(cool)"]},"wink":{"title":"Wink","codes":[":o",":=o",":-o",":O",":=O",":-O"]},"crying":{"title":"Crying","codes":[";(",";-(",";=("]},"sweating":{"title":"Sweating","codes":["(sweat)","(:|"]},"speechless":{"title":"Speechless","codes":[":|",":=|",":-|"]},"kiss":{"title":"Kiss","codes":[":*",":=*",":-*"]},"tongue-out":{"title":"Tongue Out","codes":[":P",":=P",":-P",":p",":=p",":-p"]},"blush":{"title":"Blush","codes":["(blush)",":$",":-$",":=$",":\">"]},"wondering":{"title":"Wondering","codes":[":^)"]}};
     var emotionsList=definition;
    $.emoticons.define(definition);
 
	var emDrpList="<div id='emdrp'></div><div id='emotionsdrp'>";
	for(var emotion in emotionsList ){
		emDrpList+='<div><div class="em" onclick="return selectEmotion(this);">'+$.emoticons.replace(emotionsList[emotion].codes[0])+" "+emotionsList[emotion].title+'</div></div>';	
	}
	emDrpList+="</div>";
	if(document.getElementById("emotionslist")){
		document.getElementById("emotionslist").innerHTML=emDrpList;
	}
	
	//createEmotionsDrp(definition);
			
    $('#comment').keyup(function(e)
    {
        if(e.keyCode == 13)
        {
            var comment = $('#comment').val()
            if(comment == "")
            {
                alert("Please write something in comment.");
            }
            else
            {
                var textWithEmoticons = $.emoticons.replace(comment);
                $("#commentbox").append("<div class='commentarea'>"+textWithEmoticons+"</div>");
 
                $('#comment').val("");
            }
        }
    });
});
</script>
<style>
#emotionsdrp{
    position: absolute;
    padding: 4px;
}

#emotionsdrp div .em{
    cursor: pointer;
    padding: 2px;
} 
#emotionsdrp{
    background-color: gainsboro;
    width: 130px;
}
.em{
    
}
.em:hover{
    background-color: cadetblue;
}
.status
{
    width:350px;
    font-size: 14px;
    line-height: 18px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.commentarea
{
    width:350px;
    font-size: 13px;
    line-height: 18px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    border: thin;
    border-color: white;
    border-style: solid;
    background-color: hsl(0, 0%, 96%);
    padding: 5px;
}
#comment
{
    width: 357px;
    height: 23px;
    font-size: 15px;
}
.main
{
    margin-left:auto;
    margin-right:auto;
    width:360px;
}

</style>
		<div>
			Main Title
			<div style="background-color:gray;width:300px">
				<table>
					<tr>
						<td>
							<div id="emotionslist" style="width: 150px;">
							</div>							
						</td>
						<td>
							<div>
								<input type="text">
							</div>
						</td>
						<td>
							<div>
								<input type="button" id="add" name="add" value="Save">
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<script>
			function selectEmotion(elemId){
                 //console.log($(elemId).find(".emoticon").html());
                 var elemHtml=$.emoticons.replace($(elemId).find(".emoticon").html());
                 if(document.getElementById("emdrp")){                    
                    $("#emdrp").html(elemHtml);
                 } 
			}
		</script>
	</body>
</html>